<script setup>
import {ref, onMounted} from "vue";
import {useRoute} from "vue-router";
import {BookCategoryService, BookSearchService} from "@/apis/book";
import {ElMessage} from "element-plus";
import {useCartStore} from "@/stores/shopcarStore";

const searchList = ref([])
const searchTemp = ref([])
const route = useRoute()
const sortType = ref(0)
const range = ref({
    min: '',
    max: ''
})

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(10)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    getBookSearch();
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num
    getBookSearch();
}

// 获取关键词获取图书
const getBookSearch = async () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        keyword: route.params.keyword
    }
    let type = route.name
    if (type == '1') {
        const res = await BookSearchService(params)
        total.value = res.data.total;
        searchList.value = res.data.items
        searchTemp.value = searchList.value
    } else {
        const res = await BookCategoryService(params)
        total.value = res.data.total;
        searchList.value = res.data.items
        searchTemp.value = searchList.value
    }

}

onMounted(() => getBookSearch())

const cartStore = useCartStore()

const addCart = (item) => {
    if (item.id && item.stock >= 1) {
        cartStore.addCart({
            id: item.id,
            count: 1,
            selected: true
        })
    } else {
        ElMessage.warning('添加失败，可能是库存不足')
    }

}

// 排序条件
const orderDefault = () => {
    searchTemp.value = searchList.value
    searchTemp.value.sort((a, b) => {
        return a.id - b.id
    })
    sortType.value = 0
    range.value.min = null
    range.value.max = null
}

const orderBySales = () => {
    searchTemp.value.sort((a, b) => {
        return b.sales - a.sales
    })
    sortType.value = 1
}

const orderByPriceInc = () => {
    searchTemp.value.sort((a, b) => {
        return a.price - b.price
    })
    sortType.value = 2
}
const orderByPriceDesc = () => {
    searchTemp.value.sort((a, b) => {
        return b.price - a.price
    })
    sortType.value = 3
}

const orderByRange = () => {
    searchTemp.value = searchList.value
    searchTemp.value = searchTemp.value.filter((item) => {
        let flag = false
        if (item.price >= parseInt(range.value.min) && item.price <= parseInt(range.value.max)) {
            flag = true
        }
        return flag
    })
}

</script>

<template>
    <div id="boxShow">
        <!-- condition start -->
        <div class="condition wrapper vue">
            <span id="order-way">排序方式</span>
            <span class="order" :class="{orderUse: sortType === 0}" @click="orderDefault">默认</span>
            <span class="order" :class="{orderUse: sortType === 1}" @click="orderBySales">按销量</span>
            <span class="order" :class="{orderUse: sortType === 2}" @click="orderByPriceInc">价格升序</span>
            <span class="order" :class="{orderUse: sortType === 3}" @click="orderByPriceDesc">价格倒序</span>
            <span class="range">请输入价格区间</span>
            <input type="text" name="low-price" id="low-price" placeholder="￥" v-model="range.min"/>
            <span id="space">-</span>
            <input type="text" name="top-price" id="top-price" placeholder="￥" v-model="range.max"/>
            <span class="range-search" @click="orderByRange">查询</span>
            <span class="range-search" @click="orderDefault">清除</span>
            <span class="total">共<span>{{ total }}</span>件商品</span>
        </div>
        <!-- condition end -->

        <div class="goods wrapper">
            <div class="content clearfix" v-if="searchList.length !== 0">
                <ul>
                    <li v-for="item in searchTemp" :key="item.id">
                        <RouterLink :to="`/detail/${item.id}`">
                            <img v-img-lazy="item.img" alt=""/>
                            <p class="price">
                                ￥{{ parseFloat(item.price).toFixed(2) }}<span>￥{{ parseFloat(item.oldPrice).toFixed(2) }}</span>
                            </p>
                            <h3>{{ item.name }}</h3>
                            <p class="hot">{{ item.sales }}<span>销量</span></p>
                        </RouterLink>
                        <div class="goods-oper">
                            <span id="goods-collect"><el-icon><Star/></el-icon>收藏</span>
                            <span id="goods-in" @click="addCart(item)"><el-icon><ShoppingCart/></el-icon>加入购物车</span>
                        </div>
                    </li>
                </ul>
            </div>

            <div v-else class="clearfix" style="margin-top: 20px;">
                <img src="@/assets/images/tips.jpg" style="width: 100px; position: relative; left: 45%">
                <h1 style="text-align: center; color: #b1191a; margin-top: 10px">没有数据喵~</h1>
            </div>

            <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10,20,30]"
                           layout="jumper, total, sizes, prev, pager, next" background :total="total"
                           @size-change="onSizeChange"
                           @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>
        </div>

    </div>
</template>

<style scoped>
.condition {
    height: 50px;
    margin-top: 50px;
    background-color: #f1f1f1;
    border-radius: 20px;
}

.condition #order-way {
    margin-left: 20px;
    margin-right: 10px;
    line-height: 50px;
    font-size: 16px;
    color: black;
}

.condition .order {
    line-height: 50px;
    padding: 5px 10px;
    margin-right: 5px;
    border: 1px solid #b1191a;
    border-radius: 20px;
    color: black;
    cursor: pointer;
}

.condition .range {
    margin-left: 20px;
    margin-right: 5px;
    color: black;
}

.condition .range-search {
    margin-left: 5px;
    line-height: 50px;
    padding: 2px 10px;
    background-color: #b1191a;
    color: white;
    cursor: pointer;
}

.condition .orderUse {
    background-color: #b1191a;
    color: white;
}

.condition #space {
    font-size: 18px;
    color: black;
}

.condition input {
    width: 50px;
}

.condition .total {
    float: right;
    line-height: 50px;
    margin-right: 20px;
    font-size: 14px;
}

.condition .total span {
    color: #b1191a;
}

.goods {
    margin-top: 10px;
    border-top: 2px solid #b1191a;
}

.content {
    padding-top: 30px;
    padding-bottom: 30px;
}

.goods .content li {
    float: left;
    margin-right: 15px;
    margin-bottom: 100px;
    width: 228px;
    height: 250px;
    border-radius: 20px;
}

.content img {
    width: 180px;
    height: 180px;
    border-radius: 20px 20px 0 0;
    object-fit: contain;
}

.content .price {
    font-size: 20px;
    color: #b1191a;
}

.content .price span {
    margin-left: 10px;
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
}

.content h3 {
    margin-top: 5px;
    height: 40px;
    overflow: hidden;
}

.content li:nth-child(5n) {
    margin-right: 0px;
}

.content .hot {
    margin-top: 5px;
    color: #1953b1;
}

.content .hot span {
    margin-top: 5px;
    color: #b8b8b8;
}

.content .goods-oper {
    margin-top: 10px;
    width: 228px;
    height: 30px;
    border: 1px solid #b8b8b8;
    border-radius: 20px;
    cursor: pointer;
}

.goods-oper #goods-collect {
    line-height: 30px;
    padding-left: 20px;
    padding-right: 25px;
    font-size: 16px;
    font-weight: bold;
    border-right: 1px solid #b8b8b8;
}

.goods-oper #goods-in {
    line-height: 30px;
    padding-left: 25px;
    font-size: 16px;
    font-weight: bold;
    color: #b1191a;
}
</style>